import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

// MARK: 1、创建 Store 类
class Timer {
  secondsPassed = 0;

  constructor() {
    // https://zh.mobx.js.org/observable-state.html#makeautoobservable
    makeAutoObservable(this);
  }

  increaseTimer() {
    this.secondsPassed += 1;
  }
}

const myTimer = new Timer();

// MARK: 2、通过 observer 包裹 react 组件，从而实现响应式
const TimerView = observer<{ timer: Timer }>(({ timer }) => <span>Seconds passed: {timer.secondsPassed}</span>);

const App = () => {
  return <TimerView timer={myTimer}></TimerView>
};

// MARK: 3、可以直接修改 store 类，来触发 React 组件的重渲染
setInterval(() => {
  myTimer.increaseTimer()
}, 1000)

export default App;
